import React, {Component} from 'react';
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import {Radio, InputNumber, Modal, Form, Space, Button, Input, Typography , message} from "antd";
import {
    apiGetShopKeywordPage,
    apiSaveThirdHotKeyword,
    apiShopKeywordDel
} from '@/request/tripartiteMall/hotConfig.jsx'
import { EditOutlined } from '@ant-design/icons';
import { cloneDeep } from 'lodash';

const { Paragraph } = Typography;
let editValue = {}
class Index extends Component {
    state = {
        dataSource: [], //表格数据
        columns: [
            {
                title: "热词名称",
                dataIndex: "keyword",
                key: "keyword",
                render: (text, record, index) => {
                    if (record.flag){
                        return <Space>
                            <Input style={{width:400}} maxLength={30} defaultValue={text} onChange={(e)=>this.valueInput(e,record)} />
                            <Button
                                type="primary"
                                onClick={()=>this.edit(record)}
                            >
                                确定
                            </Button>
                        </Space>
                    }
                    else {
                        return <>
                            {text} <TheButton onClick={()=>this.openShortInput(index,record)} haspermi={['tripartiteMall:keyword:edit']} icon={<EditOutlined />}/>
                        </>
                    }
                    // return <>
                    //     <Paragraph
                    //         editable={{
                    //             // editing: true,
                    //             maxLength: 30,
                    //             icon: <TheButton haspermi={['tripartiteMall:keyword:edit']} icon={<EditOutlined />}/>,
                    //             tooltip: '编辑',
                    //             onChange: (v)=>this.setCustomIconStr(v,record),
                    //             onCancel: ()=>this.editCancel(index),
                    //             // onEnd: this.edit
                    //             enterIcon: <Button style={{left:800,position:'absolute'}} type={'primary'}>确定</Button>
                    //         }}
                    //         style={{marginBottom: 0,width: 500}}
                    //     >
                    //         {text}
                    //     </Paragraph>
                    //     {/*<Button type={'primary'}>确定</Button>*/}
                    // </>
                }
            },
            {
                title: "操作",
                dataIndex: "other",
                key: "other",
                fixed: 'right',
                width: "80px",
                render: (text, record) => {
                    return <Space>
                        <TheButton haspermi={['tripartiteMall:keyword:del']} onClick={() => this.del(record.keywordId)}>删除</TheButton>
                    </Space>
                }
            },
        ],
        visible: false,
        keywordId: '',
        keyword: '',
        close: false
    }
    editCancel = (e)=>{
        let t = e.target.localName
        let { dataSource ,close} = this.state;
        if (t!=='svg' && t!=='button' && close && t!== 'path' && t!== 'input'){
            dataSource.map(item=>{
                return item.flag = false
            })
            this.setState({
                dataSource: cloneDeep(dataSource),
                close: false
            })
        }
    }
    componentDidMount() {
        this.getData()
    }
    getData = ()=>{
        apiGetShopKeywordPage({
            keywordCategory: 2
        }).then(res=>{
            if (res.code === 0){
                this.setState({
                    dataSource: res.data
                })
            }
        })
    }
    add = ()=>{
        this.setState({
            visible: true
        })
    }
    openShortInput = (i,v) => {
        let { dataSource } = this.state;
        dataSource.map((item,index)=>{
            item.flag = index === i;
            return item
        })
        this.setState({
            dataSource: cloneDeep(dataSource),
            keyword: v.keyword,
            keywordId: v.keywordId,
            close: true
        })
    }
    valueInput = (e,v)=> {
        // let { dataSource } = this.state;
        // dataSource[i].keyword = e.target.value
        // this.setState({
        //     dataSource
        // })
        this.setState({
            keyword: e.target.value,
            keywordId: v.keywordId
        })
    }
    setCustomIconStr = async (value,record)=>{
        editValue = {
            keywordId: record.keywordId,
            keyword: value
        }
    }
    edit = async (values)=>{
        let { keywordId,keyword } = this.state
        // console.log(keywordId,keyword)
        apiSaveThirdHotKeyword({
            keywordId,
            keyword
        }).then(res=>{
            if (res.code === 0){
                message.success('编辑成功')
                this.getData()
            }
        })
    }
    del = (id)=>{
        apiShopKeywordDel({id: id}).then(res=>{
            if (res.code===0){
                message.success('删除成功')
                this.getData()
            }
        })
    }
    handleChannelOk = ()=>{
        this.FormRef.validateFields().then(values=>{
            apiSaveThirdHotKeyword({
                ...values
            }).then(res=>{
                if (res.code === 0){
                    message.success('新增成功')
                    this.handleChannelCancel()
                    this.getData()
                }
            })
        })
    }
    handleChannelCancel = ()=>{
        this.setState({
            visible: false
        })
    }
    render() {
        let {columns, dataSource,visible} = this.state
        return (
            <div className={'p-layout-box'} onClick={(e)=>this.editCancel(e)}>
                <div style={{width: "120px", marginBottom: "10px"}}>
                    <TheButton haspermi={['tripartiteMall:keyword:add']} type={'primary'} size={'middle'} onClick={() => {
                        this.add()
                    }}>新建</TheButton>
                </div>
                <TheTable
                    scroll={{x: "max-content", y: "63vh"}}
                    columns={columns}
                    dataSource={dataSource}
                    rowKey={'keywordId'}
                />
                <Modal
                    title={"新增热词"}
                    visible={visible}
                    maskClosable={false}
                    destroyOnClose={true}
                    onOk={() => this.handleChannelOk()}
                    onCancel={() => this.handleChannelCancel()}
                    okText={'保存'}
                >
                    <Form
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 14,
                        }}
                        ref={(ref)=>this.FormRef=ref}
                    >
                        <Form.Item
                            label="热词名称"
                            name="keyword"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入热词名称!',
                                },
                            ]}
                        >
                            <Input maxLength={30} placeholder='最多允许输入30个字'/>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default Index;
